<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            border-collapse: collapse;
            border: 1px solid #333;
            width: 1000px;

        }
        table tr,th,td{
            border: 1px solid #333;
            text-align: center;
        }
        table th{
            width: 20%;
        }
        .loading{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,.3);
            display: none;
            justify-content: center;
            align-items: center;
        }
        .loading .icon{
            animation: loading 2.5s linear infinite ;
        }
        @keyframes loading{
            to {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="shengao">
        <span>身高：</span>
        <input type="text" >
    </div>
    <div class="tizhong">
        <span>体重：</span>
        <input type="text" >
    </div>
    <button>计算</button>
    <table>
        <thead>
            <tr>
                <th>编号</th>
                <th>日期</th>
                <th>身高</th>
                <th>体重</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody class="te" id="te">
            
            <!-- <td></td>
            <td></td>
            <td></td>
            <td></td> -->
            <!-- <tr>
                <td colspan="5">暂无数据</td>
            </tr> -->
        </tbody>
    </table>
    <div class="loading">
        <div class="icon">
            <svg t="1628759746148" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2114" width="50" height="50"><path d="M597.466453 76.356267C597.466453 118.510933 563.264853 152.712533 521.110187 152.712533 478.95552 152.712533 444.75392 118.510933 444.75392 76.356267 444.75392 34.2016 478.95552 0 521.110187 0 563.264853 0 597.466453 34.2016 597.466453 76.356267" p-id="2115" fill="#d81e06"></path><path d="M403.060053 118.227627C403.060053 157.924693 370.87232 190.112427 331.175253 190.112427 291.478187 190.112427 259.324587 157.924693 259.324587 118.227627 259.324587 78.53056 291.478187 46.342827 331.175253 46.342827 370.87232 46.342827 403.060053 78.53056 403.060053 118.227627" p-id="2116" fill="#d81e06"></path><path d="M248.49408 231.297707C248.49408 268.50304 218.320213 298.676907 181.11488 298.676907 143.875413 298.676907 113.701547 268.50304 113.701547 231.297707 113.701547 194.092373 143.875413 163.918507 181.11488 163.918507 218.320213 163.918507 248.49408 194.092373 248.49408 231.297707" p-id="2117" fill="#d81e06"></path><path d="M152.579413 396.752213C152.579413 431.499947 124.419413 459.659947 89.67168 459.659947 54.923947 459.659947 26.763947 431.499947 26.763947 396.752213 26.763947 362.00448 54.923947 333.84448 89.67168 333.84448 124.419413 333.84448 152.579413 362.00448 152.579413 396.752213" p-id="2118" fill="#d81e06"></path><path d="M133.90848 593.435307C133.90848 625.691307 107.762347 651.871573 75.472213 651.871573 43.216213 651.871573 17.07008 625.691307 17.07008 593.435307 17.07008 561.179307 43.216213 534.99904 75.472213 534.99904 107.762347 534.99904 133.90848 561.179307 133.90848 593.435307" p-id="2119" fill="#d81e06"></path><path d="M197.116587 772.16768C197.116587 801.96608 172.98432 826.098347 143.18592 826.098347 113.38752 826.098347 89.255253 801.96608 89.255253 772.16768 89.255253 742.36928 113.38752 718.237013 143.18592 718.237013 172.98432 718.237013 197.116587 742.36928 197.116587 772.16768" p-id="2120" fill="#d81e06"></path><path d="M325.256533 904.789333C325.256533 932.096 303.104 954.248533 275.797333 954.248533 248.490667 954.248533 226.338133 932.096 226.338133 904.789333 226.338133 877.482667 248.490667 855.330133 275.797333 855.330133 303.104 855.330133 325.256533 877.482667 325.256533 904.789333" p-id="2121" fill="#d81e06"></path><path d="M499.503787 972.485973C499.503787 997.33504 479.36512 1017.439573 454.550187 1017.439573 429.70112 1017.439573 409.562453 997.33504 409.562453 972.485973 409.562453 947.636907 429.70112 927.532373 454.550187 927.532373 479.36512 927.532373 499.503787 947.636907 499.503787 972.485973" p-id="2122" fill="#d81e06"></path><path d="M691.705173 958.296747C691.705173 980.65408 673.580373 998.77888 651.22304 998.77888 628.865707 998.77888 610.740907 980.65408 610.740907 958.296747 610.740907 935.939413 628.865707 917.814613 651.22304 917.814613 673.580373 917.814613 691.705173 935.939413 691.705173 958.296747" p-id="2123" fill="#d81e06"></path><path d="M852.67456 866.8672C852.67456 886.7328 836.563627 902.877867 816.663893 902.877867 796.798293 902.877867 780.68736 886.7328 780.68736 866.8672 780.68736 847.0016 796.798293 830.856533 816.663893 830.856533 836.563627 830.856533 852.67456 847.0016 852.67456 866.8672" p-id="2124" fill="#d81e06"></path><path d="M961.25952 716.786347C961.25952 734.194347 947.162453 748.291413 929.754453 748.291413 912.346453 748.291413 898.215253 734.194347 898.215253 716.786347 898.215253 699.378347 912.346453 685.28128 929.754453 685.28128 947.162453 685.28128 961.25952 699.378347 961.25952 716.786347" p-id="2125" fill="#d81e06"></path><path d="M998.64576 526.861653C998.64576 541.77792 986.528427 553.895253 971.61216 553.895253 956.695893 553.895253 944.57856 541.77792 944.57856 526.861653 944.57856 511.945387 956.695893 499.828053 971.61216 499.828053 986.528427 499.828053 998.64576 511.945387 998.64576 526.861653" p-id="2126" fill="#d81e06"></path></svg>
        </div>
    </div>
</body>
<script src="../../../jQuery/jquery.js"></script>
<script>
    const myAjax = function(options){
        
        let method = options.method || 'get'
        let url = options.url
        let data = options.data ? JSON.stringify(options.data) : null   //如果有url自动转换。为啥有null？因为get请求这块没有数据
        let xhr = new XMLHttpRequest()
        xhr.open(method,url)
        xhr.setRequestHeader('Content-Type' ,'application/json' ,'charset=utf-8')
        xhr.send(data)
        xhr.responseType = 'json'
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4){
                if(xhr.status === 200){
                    //success
                    // console.log(xhr.response)
                    options.success(xhr.response)
                }else{
                    //error
                    // console.log(xhr.response)
                    options.error(xhr.response)
                }
            }
        }
    }

    let shengao = document.querySelector('.shengao input')
    let tizhong = document.querySelector('.tizhong input')
    let te = document.querySelector('#te')
    let jisuan = document.querySelector('button')
    let loading = document.querySelector('.loading')

    
    jisuan.onclick = function(){
        //post 请求
        myAjax({
        method:'post',
        url:'http://veihwwnelcwq.leanapp.cn/bmi',
        data:{
            height:shengao.value,
            weight:tizhong .value
        },
        success(res){
           getlist()
        },
        error(e){
            alert('shujuyouwu')
        }
        })
        shengao.value = ''
        tizhong.value = ''
       }
    
        //get 请求
    function getlist(){
        loading.style.display = 'flex' 
        myAjax({
        url:'http://veihwwnelcwq.leanapp.cn/bmi',
        success(res){
            loading.style.display = 'none' 
            te.innerHTML = '' //清空列表，位置不能变。要在循环的上边
            if(res.data.length === 0){
                let tr = document.createElement('tr')
                tr.innerHTML = `<td colspan="5">暂无数据</td>`
            te.append(tr)    
            }else{
                let count = 0
                for (let item of res.data) { 
                    count+=1
                    let tr = document.createElement('tr')
                    let date = new Date(item.createdAt)
                    let date1 = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}  ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`
                    tr.innerHTML = `
                                    <td>${count}</td>
                                    <td>${date1}</td>
                                    <td>${item.height}</td>
                                    <td>${item.weight}</td>
                                    <td><a data-id="${item.objectId}" href="javascript:">删除</a></td>
                    `
                    te.append(tr)
                }
            }
            
            
                // 和地下的事件委托一样的效果。主要是找id
                // let deletebtn = document.querySelectorAll('tr td a')
                // for(i=0;i<deletebtn.length;i++){
                //     deletebtn[i].addEventListener('click',function(){
    //     // let id = this.getAttribute('data-id')  //这块最重要的就是找到要删除的id，因为每一个数据他们自身的objectid
    //                                             //都不一样，可以获取点击到的那个删除的a标签，就能找到对应的
    //                                             //id。写一个自定义属性找到自身独有的objectid            
                    
                //     })
                    
                // }
        },
        error(e){
            console.log(e)
        }
    })
    }
    getlist()

    //事件委托的用法，通过他的父元素来控制子元素。这么麻烦是因为这是一个异步的操作，一开始是没有删除这个a标签的
    //只有发送数据后才能找到这个a标签
    // te.addEventListener('click',function(event){
    //     if(event.target.tagName === 'A'){
    //         let id = event.target.getAttribute('data-id')
    //        if(confirm('确定删除此数据？')){
    //         myAjax({
    //                     method:'delete',
    //                     url:'http://veihwwnelcwq.leanapp.cn/bmi',
    //                     data:{
    //                         id:id  //前一个id是后台写好的
    //                     },
    //                     success(res){
    //                         getlist()
    //                     }
    //                 })
    //        }
    //     }
    // })
    // 用jq的写法
    //这里用on 相当于一个事件委托的用法，通过（#te）找a标签
    $('#te').on('click','a',function(event){
        if(event.target.tagName === 'A'){
            // let id = event.target.getAttribute('data-id')
            // let id = $(this).attr('data-id')
            let id = $(this).data('id')  //jq中专门用于获取data-*的自定义属性的用法
            
           if(confirm('确定删除此数据？')){
            myAjax({
                        method:'delete',
                        url:'http://veihwwnelcwq.leanapp.cn/bmi',
                        data:{
                            id:id  //前一个id是后台写好的
                        },
                        success(res){
                            getlist()
                        }
                    })
                }
            }
        })
  
    

</script>
</html>
